<template>
  <div class="index">
    <NavBar/>
    <div class="myReward userReward dashboard-head">
      <div>
        <div class="head item">
          <div class="container">
            <div class="photo"><img :src="me.sysUser.avatar"></div>
            <div v-if="me.sysUser.authType==='0'||!me.sysUser.authType" class="name">
              <h1 class="ftz24">{{me.sysUser.userAccount}}</h1>
            </div>
            <div v-if="me.sysUser.authType === '1'||me.sysUser.authType === '2'||me.sysUser.authType === '3'" class="name">
              <div>
                <span class="ftz24">{{me.sysUser.authName}}</span>
                <i>我的主页</i>
              </div>
              <div>
                <span>关注 {{me.focusNum}}</span>
                <span>｜</span>
                <span>粉丝 {{me.fansNum}}</span>
              </div>
            </div>
            <div class="fr info">
              <ul>
                <li>
                  <span class="ftz16">{{me.focusNum}}人</span>
                  <p>关注</p>
                </li>
                <li>
                  <span class="ftz16">{{me.questionNum}}次</span>
                  <p>提问</p>
                </li>
                <li>
                  <span class="ftz16">{{me.rewardAmount}}</span>
                  <p>打赏</p>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <div class="container">
          <div class="con w82 item fr">
            <div class="item-h">
              <span class="ftz16">打赏明细</span>
              <!-- <div class="fr">
                <i class="ftz16">筛选：</i>
                <select name="">
                  <option value="">全部</option>
                  <option value="0">红包打赏</option>
                </select>
              </div> -->
            </div>
            <div class="reward-c">
              <div class="reward-tab">
                <table>
                  <tr>
                    <th>日期</th>
                    <th>栏目名称</th>
                    <th>类型</th>
                    <th>支付方式</th>
                    <th>金额
                      <i>（中亿币）</i>
                    </th>
                  </tr>
                  <tr v-for="(item, index) in rewardList" :key="index">
                    <td>{{item.createTime | parseTime('{m}-{d} {h}:{i}')}}</td>
                    <td>{{item.businessDetail}}</td>
                    <td>{{item.orderTypeName}}</td>
                    <td>{{item.payTypeName}}</td>
                    <td>{{item.amount}}</td>
                  </tr>
                </table>
              </div>
              <button v-if="total > rewardList.length"
                class="load-more ftz16"
                @click="loadMore">
              <template v-if="loading">
                <i class='layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop ftz20'></i>
                <span>正在加载，请稍候......</span>
              </template>
              <span v-else>点击加载更多...</span>
              </button>
              <button class="load-more ftz16" v-if="total===rewardList.length">数据已经全部加载</button>
            </div>
          </div>
          <SideBar1/>
        </div>
      </div>
    </div>
    <Footer/>
  </div>
</template>
<script>
import NavBar from '@/components/nav-bar'
import Footer from '@/components/footer'
import { mapState } from 'vuex'
import SideBar1 from '@/components/side-bar1'
import * as api from '@/service/api'
export default {
  components: {
    NavBar,
    Footer,
    SideBar1
  },
  data () {
    return {
      rewardList: [],
      total: null,
      searchData: {
        pageSize: 10,
        pageNum: 1,
        keyword: ''
      },
      loading: false
    }
  },
  created () {
    this.getRewardList()
  },
  computed: {
    // 来源网址
    url () {
      return this.$route.query.url || ''
    },
    curRoute () {
      return this.$route.path
    },
    ...mapState({
      me: state => state.me
    })
  },
  methods: {
    async getRewardList () {
      this.loading = true
      let res = await api.getRewardList({...this.searchData})
      // this.rewardList = res.data.list
      if (this.searchData.pageNum === 1) {
        this.rewardList = res.data.list
      } else {
        this.rewardList = this.rewardList.concat(res.data.list)
      }
      this.total = res.data.total
      this.loading = false
    },
    loadMore () {
      this.searchData.pageNum = this.searchData.pageNum + 1
      this.getRewardList()
    }
  }
}
</script>
<style lang="scss">
@import "../../style/res/userReward";
</style>
